#include("header.html")
<div class="container">
  <div class="box box-pink">
    <div class="box-header">
      <div class="text-center">
        <span class="h-title">在线打分</span>
      </div>
    </div>
    <div class="box-body">
      <div>
        #for(Shop s : pages.content)
        <div data-shop="${s.id ?! '0'}" class="user-mark">
          <div>
            <label>请您为<span>${s.name ?! '匿名'}</span>点评!</label>
            <button class="js-cancel pull-right btn btn-xs btn-warning">取消</button>
            <button class="js-show hide pull-right btn btn-xs btn-info">评分</button>
            <p class="pull-right">
              <span style="display: none;" class="label">点评成功</span>
            </p>
          </div>
          <div class="show">
            <label class="radio-inline">
              <input type="radio" value="4" name="star${s.id ?! '0'}" checked> 优秀
            </label>
            <label class="radio-inline">
              <input type="radio" value="3" name="star${s.id ?! '0'}"> 良好
            </label>
            <label class="radio-inline">
              <input type="radio" value="2" name="star${s.id ?! '0'}"> 及格
            </label>
            <label class="radio-inline">
              <input type="radio" value="1" name="star${s.id ?! '0'}"> 差评
            </label>
          </div>
        </div>
        #else
        <div class="text-center">
          <h2>暂无打分项</h2>
        </div>
        #end
      </div>
      <p class="text-center red-a">每次打分只能进行一次，不可修改，请慎重选择！</p>
      <div class="form-group">
        <button class="btn btn-primary btn-group-justified">提交评价</button>
      </div>
      <script>
        var limit = '${limit}';
        var stage = '${stageId}';
        $('button.btn-primary').click(function () {
          var marks = $('.user-mark');
          var len = marks.find('.show').length;

          $.each(marks, function (k, v) {
            var shopId = $(v).data('shop');
            var star = $(v).find('.show input:radio:checked').val();
            if (star != null) {
              doMark(v, shopId, star, function () {
                len--;
              });
            }
          }); // each
         if (len === 0) {
           window.setTimeout(function () {
             location.href = '/user';
           }, 2000);
         }
        });

        $('.js-cancel').click(function (e) {
          var $div = $(this).parents('.user-mark').children('div').last();
          $div.removeClass('show').addClass('hide');
          $(this).addClass('hide').siblings('.js-show').removeClass('hide');
        });

        $('.js-show').click(function (e) {
          var $div = $(this).parents('.user-mark').children('div').last();
          $div.removeClass('hide').addClass('show');
          $(this).addClass('hide').siblings('.js-cancel').removeClass('hide');
        });

        function doMark(dom, shopId, star, callback) {
          var fd = new FormData();
          fd.append('shop.id', shopId);
          fd.append('star', star);
          fd.append('limit', limit);
          fd.append('stage.id', stage);

          var xhr = new XMLHttpRequest();
          xhr.open('POST', '/markRecord/add', false);
          xhr.onload = function (ev) {
            var data = JSON.parse(xhr.responseText);
            $(dom).find('.js-cancel').addClass('hide');

            if (data.success) {
              callback ? callback() : null;
              $(dom).find('p > span').addClass('label-success').fadeIn();
            } else {
              $(dom).find('p > span').addClass('label-danger')
                  .html('打分失败: ' + data.msg).fadeIn();
              window.setTimeout(function () {
                $(dom).find('p > span').fadeOut();
                $(dom).find('.js-cancel').removeClass('hide');
              }, 1500);
            }
          };

          xhr.send(fd);
        }
      </script>
      #include("sign.html")
    </div>
  </div>
</div>
</body>
</html>